import React from 'react'
import { Button, Card, Form, Input, message, Modal, Table } from 'antd'
import { fetchPost } from './../../../utils/request'

const FormItem = Form.Item

class Index extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      isAddToModal: false,
      userInfo: {},
      useList: [],
      loading: false,
      searchPhone: null,
    }
  }

  handleSearch = (e) => {
    e.preventDefault()
    this.props.form.validateFields((err, value) => {
      if (!err) {
        let {phone} = value
        this.setState(
          {phone: phone,},
          () => {this.searchUser()}
        )
      }
    })
  }

  handleCancel = () => {
    this.setState({
      isAddToModal: false
    })
  }

  handleSubmit = (e) => {
    e.preventDefault()
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        let {userName, mobile, identityNo, reason,aadhaarNo,passport,driverLicense,vetorId,panCardNo} = values
        let param = {userName, mobile, identityNo, reason,aadhaarNo,passport,driverLicense,vetorId,panCardNo}

        fetchPost('/user/add/userBlackList', param).then(json => {
          if (json.code === 0) {
            message.info('success', () => {
              this.setState({
                isAddToModal: false
              })
            })
            this.props.form.resetFields()
            this.searchUser()
          } else {
            message.error(json.msg, 2, () => {
              this.setState({
                isAddToModal: false
              })
            })
          }
        })

      }
    })
  }

  searchUser = () => {
    this.setState({
      loading: true
    }, () => {
      fetchPost(`/user/query/userBlackList/${this.state.phone}`,{})
        .then(res => {
          if (res.code === 0) {
            let userInfos = res.data.userInfos
            if (userInfos) {
              this.setState({
                useList: userInfos,
                loading: false
              })
            } else {
              this.setState({
                useList: [],
                loading: false
              })
            }
          } else {
            this.setState({
              loading: false
            }, () => {
              message.warn(res.msg)
            })
          }
        })
    })
  }

  render () {

    const formItemLayout = {labelCol: {span: 5}, wrapperCol: {span: 12},}

    const {getFieldDecorator} = this.props.form

    const columns = [
      {
        title: 'Name',
        dataIndex: 'userName',
        key: 'userName',
      },
      {
        title: 'Mobile',
        dataIndex: 'userMobile',
        key: 'userMobile',
      }, {
        title: 'AadhaarNo',
        dataIndex: 'aadhaarNo',
        key: 'aadhaarNo',
      },{
        title: 'Passport',
        dataIndex: 'passport',
        key: 'passport',
      },{
        title: 'DriverLicense',
        dataIndex: 'driverLicense',
        key: 'driverLicense',
      },{
        title: 'VetorId',
        dataIndex: 'vetorId',
        key: 'vetorId',
      },{
        title: 'PanCardNo',
        dataIndex: 'panCardNo',
        key: 'panCardNo',
      },
      {
        title: 'Whether On the Blacklist',
        key: 'inBlackList',
        render: (text, record) => {
          return (record.inBlackList === true ? 'Yes' : 'No')
        },
      },
      {
        title: 'Reason',
        dataIndex: 'reason',
        key: 'reason',
      },
      {
        title: 'Operation',
        key: 'action',
        render: (text, record) => {
          return (
            record.inBlackList === true ? null
              : <Button type="danger"
                        onClick={() => this.setState({isAddToModal: true, userInfo: record})}
              >add to blacklist</Button>
          )
        },
      }
    ]

    return (
      <div>

        <Modal title="Add To Blacklist" visible={this.state.isAddToModal} onCancel={this.handleCancel} footer={null}>
          <Form style={{margin: 'auto'}} horizontal>
            <FormItem {...formItemLayout} label="Name">
              {getFieldDecorator('userName', {initialValue: this.state.userInfo.userName})(
                <Input disabled/>
              )}
            </FormItem>
            <FormItem {...formItemLayout} label="Mobile">
              {getFieldDecorator('mobile', {initialValue: this.state.userInfo.userMobile})(
                <Input disabled/>
              )}
            </FormItem>
            <FormItem {...formItemLayout} label="AadhaarNo">
              {getFieldDecorator('aadhaarNo', {initialValue: this.state.userInfo.aadhaarNo})(
                <Input disabled/>
              )}
            </FormItem>
            <FormItem {...formItemLayout} label="Passport">
              {getFieldDecorator('passport', {initialValue: this.state.userInfo.passport})(
                <Input disabled/>
              )}
            </FormItem>
            <FormItem {...formItemLayout} label="DriverLicense">
              {getFieldDecorator('driverLicense', {initialValue: this.state.userInfo.driverLicense})(
                <Input disabled/>
              )}
            </FormItem>
            <FormItem {...formItemLayout} label="VetorId">
              {getFieldDecorator('vetorId', {initialValue: this.state.userInfo.vetorId})(
                <Input disabled/>
              )}
            </FormItem>
            <FormItem {...formItemLayout} label="PanCardNo">
              {getFieldDecorator('panCardNo', {initialValue: this.state.userInfo.panCardNo})(
                <Input disabled/>
              )}
            </FormItem>
            <FormItem {...formItemLayout} label="Reason">
              {getFieldDecorator('reason', {initialValue: ''})(
                <Input placeholder="Please enter the reason"/>
              )}
            </FormItem>
            <FormItem wrapperCol={{span: 12, offset: 5}}>
              <Button type="primary" onClick={this.handleSubmit}>Determine</Button>
              <Button style={{marginLeft: 16}} type="ghost" onClick={this.handleCancel}>Cancel</Button>
            </FormItem>
          </Form>
        </Modal>

        <Form layout='inline' className='mb20'>
          <FormItem label='Mobile' hasFeedback>
            {getFieldDecorator('phone', {
              initialValue: '',
              rules: [{len: 10, message: 'please enter a valid mobile'}],
            })(
              <Input/>
            )}
          </FormItem>

          <FormItem>
            <Button type='primary' onClick={e => this.handleSearch(e)}>Search</Button>
          </FormItem>
        </Form>

        <Card>
          <Table
            columns={columns}
            dataSource={this.state.useList}
            loading={this.state.loading}
            pagination={false}/>
        </Card>

      </div>
    )
  }

}

Index = Form.create()(Index)
export default Index
